<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高阶函数_函数科里化</title>
    <style>
        .title{color:red}
    </style>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>


    <!-- 引入react核心库 -->
    <script src="../js/16/react.development.js" ></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script src="../js/16/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="../js/babel.js" ></script>
    <script type="text/babel"> /*此处一定要写babel，否则无法识别jsx语法*/
        //#region
            /*
                高阶函数：
                    1.若A函数，接收的参数是一个函数，那么A函数就是高阶函数。
                    2.若A函数，调用的返回值是一个函数，那么A函数就是高阶函数。
                    3.在js中，函数是一等公民，可以作为参数传递，也可以作为返回值。
                    4.高阶函数，可以接收函数作为参数，或者返回函数作为结果。
                    常见的高阶函数：
                        1.数组的方法：filter、find、map、forEach
                        2.定时器的回调函数
                        3.事件绑定
                        4.React中接受到的生命周期函数
                        5.ajax请求的回调函数
                        6.promise中的回调函数
                函数柯里化：
                    通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
            */
        //#endregion
        // 创建类式组件
        class Login extends React.Component {
            state = {
                username: '',
                password: ''
            }
            inputChange = (dataType) => {
                return (event) => {
                    console.log(event.target.value, dataType)
                    this.setState({
                        [dataType]: event.target.value
                    })
                }
                
            }
            handleSubmit = (event) => {
                event.preventDefault()
                const {username, password } = this.state;
                alert(`您输入的用户名是：${username},您输入的密码是${password}`)
            }
            render () {
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input onChange={this.inputChange('username')} type="text" placeholder="用户名" name="username" />
                        密码：<input onChange={this.inputChange('password')} type="password" placeholder="密码" name="password" />
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
</body>
</html>